さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応58
ダウンロード jQuery Mobile を使う準備
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応ダウンロード jQuery Mobile を使う準備
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応60
テーマフォルダの中に、
jQuery
とjQuery Mobile
を入れる。ココでは、
js フォルダを 作り、
その中に
入れました。
jQuery Mobile を使う準備
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応js
フォルダの中身jQuery と
jQuery Mobile の サイトから
ダウンロードした ファイル。
jQuery Mobile を使う準備
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応62
meta
タグの中に、jQuery Mobile
を読み出すタグを書く。<link rel="stylesheet" href="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.css" />
<script src="<?php ks_theme_url(); ?>js/jquery-1.6.4.min.js"></script>
<script src="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.js"></script>
多くのテーマフォルダでは、
header.php
ファイルKtai Style
で読み込む場合のタグ。→これで、
ktai-themes
フォルダを 読み込んでくれる。jQuery Mobile を使う準備
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile- 1.0b3.min.css" />
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.6.4.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile- 1.0b3.min.js"></script>
通常の
WordPress
テーマにおいて 読み込むテンプレートタグ。jQuery Mobile を使う準備
meta
タグの中に、jQuery Mobile
を読み出すタグを書く。多くのテーマフォルダでは、
header.php
ファイル さくらWORKS
関内（５）WordPress
を携帯＆スマートフォンに対応64
WordPress
のコアファイルには、jQuery
が同梱されているので、以下の
WordPress
のテンプレートタグで、読み込むこともできます。<?php wp_enqueue_script('jquery'); ?>
jQuery Mobile を使う準備
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1><?php echo get_bloginfo('name'); ?></h1>
</div>
<div data-role="content" data-theme="c">
～～～
</div>
<div data-role="footer" data-theme=“a">
～～～
</div>
</div>
（１）テーマの色を確定
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応66
<div data-role="header" data-theme="a">
<a href="<?php echo get_bloginfo('url'); ?>"
data-icon="home">TOP</a>
<h1><?php echo get_bloginfo('name'); ?></h1>
</div>
サイト
URL
（
WordPress
のテンプレートタグ）（２）アイコンもタグだけで実現。
記事上の共通部分は、
header.php
ファイルを用意 さくらWORKS
関内（５）WordPress
を携帯＆スマートフォンに対応<ul data-role="listview" data-inset="true">
<li data-role=“list-divider”>
墨田区</li>
<li><a href=“
×××.html“>
隅田公園</a></li>
<li><a href=“
×××.html“>
錦糸公園</a></li>
</ul>
HTML では・・・
トップページは、
home.php
ファイルを用意（３）リストビューもタグだけで実現。
リストもタグ指定で簡単。
さくら
WORKS
関内（５）WordPress
を携帯＆スマートフォンに対応68
<?php
$my_query = new WP_Query(array(
'cat' => 1,
'posts_per_page' => -1,
'orderby' => 'comment_count', 'order' => 'DESC'
));
?>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><?php echo get_catname('1'); ?></li>
<?php while($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
HTML から
WordPress テーマ化
（３）リストビュー
さくら